<template>
   <div v-if="tabbarShow" class="page">
      <van-tabbar :value="tabbarActive">
         <van-tabbar-item replace to="/" icon="wap-home">元素</van-tabbar-item>
         <van-tabbar-item replace to="/component" icon="fire">组件</van-tabbar-item>
         <van-tabbar-item replace to="/user" icon="friends">我的</van-tabbar-item>
      </van-tabbar>
      <div class="tabbar-leave"></div>
   </div>
</template>

<script type="es6">
   export default {
      name: "",
      components: {},
      data() {
         return {
            tabbarActive: -1,
            tabbarShow: false
         };
      },
      watch: {
         "$route": function (val) {
            switch (val.name) {
               case "index":
                  this.tabbarActive = 0;
                  this.tabbarShow = true;
                  break;
               case "component":
                  this.tabbarActive = 1;
                  this.tabbarShow = true;
                  break;
               case "user":
                  this.tabbarActive = 2;
                  this.tabbarShow = true;
                  break;
               default:
                  this.tabbarShow = false;
                  break;
            }
         }
      },
      mounted() {
      },
      methods: {}
   }
</script>

<style lang="scss" scoped>
   .tabbar-leave {
      height: 50px;
   }
</style>